@import 'common';

@media all and(max-width:$width-mobile) {
    html {
        body {
            #container {
                width:100%;

                .split {display:none}
            
                header {
                    display:block;
                    height:70px;
                    padding:0;
                    background:$red;
                    float:none;

                    .logo {
                        height:50px;
                        margin:10px 0 0 10px;
                        width:80px;

                        background-image: image-url('koncar_auto_white.png?h=50')
                    }
                    .menu-toggle {
                        display:block;
                        float:right;
                        width:36px;
                        height:36px;
                        background:image-url('menu-toggle.png');
                        margin:18px 20px 0 0;
                        cursor:pointer;

                        &:hover,&.opened {
                            background-color:$red;
                        }
                    }
                    #menu {
                        position:fixed;
                        width:100%;
                        z-index: 999;
                        display:none;
                        margin:0;
                        padding:0;
                        left:0;
                        top:70px;
                        background:$grey;
                        color:white;
                        text-align:center;
                        box-shadow: 0 5px 5px black;

                        >.menu {
                            background:transparent;
                            li {
                                float:none;

                                a {color:white}
                                strong, a:hover {
                                    background:white;
                                    color:black;
                                }

                                .menu {
                                    display:none;
                                    width:99%;
                                }

                                &.sub a {
                                    background-image:none
                                }
                            }
                        }
                    }
                }

                #content {
                    padding:20px;

                    .home-item {
                        float:none;
                        margin:0;
                        width:100%;
                    }

                    fieldset {
                        width:95%;
                        margin:10px 0;

                        input {
                            &[type=checkbox] {
                                clear:both !important
                            }
                        }
                    }

                    .contact-info {
                        float:none;
                        width:100%;
                        margin:0;

                        #contact-form {
                            label {
                                width:100%;
                            }

                            input[type=text],textarea {
                                width:98%;
                                margin:0
                            }

                            .error-container {
                                height:0
                            }

                            .captcha {
                                width:100%;
                                input[type=text]{width:40%}
                            }
                        }
                    }

                    #map {
                        clear:both;
                        margin-top:30px;
                    }
                }
            }
        }
    }
}